<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  输入用户名： <input type="text" id="txt">
  <br>
  <div id="show"></div>
  <script>
    var txt = document.getElementById("txt");
    var show = document.getElementById("show")

    txt.oninput = function () {
      var obj = {
        name: "王者荣耀",
        player: "初始用户名",
        area: "比尔吉沃特"
      }
      var temp = null;
      console.log(this.value);
      Object.defineProperty(obj, "player", {
        get: function () {
          return temp
        },
        set: function (val) {
          if (val == '') {
            alert("不能为空")
          }
          if (!/^.{1,6}$/.test(val)) {
            alert("用户名不符合规则")
          }
          temp = val;
        },
        configurable: false
      })
      obj.player = this.value; //赋值用户名
      show.innerHTML = obj.player;
    }


  </script>
</body>

</html>